import { lazy } from "react";
import { createBrowserRouter } from 'react-router-dom'
import {
    MenuFoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';

const App = lazy(() => import('../App'))
const Home = lazy(() => import('../pages/home/Index'))
const Table = lazy(() => import('../pages/table/Index'))
const Login = lazy(() => import('../pages/login/Index'))
const Biao = lazy(() => import('../pages/biao/Index'))
const Fanyi = lazy(() => import('../pages/fanyi/Index'))
const Table1 = lazy(() => import('../pages/table/table1/Index'))

type homeRouter = {
    path: string;
    element: JSX.Element;
    children?: homeRouter;
    icon?: any;
    label?: string;
}[]

export const homeRoutes:homeRouter = [
    {
        path: '/home',
        element: <Home></Home>,
        icon: <MenuFoldOutlined />,
        label: '首页'
    },
    {
        path: '/table',
        element: <Table></Table>,
        icon: <UploadOutlined />,
        label: '表格',
        children:[
            {
                path: '/table/table1',
        element: <Table1></Table1>,
        icon: <UploadOutlined />,
        label: '表1',
            }
        ]
    },
    {
        path: '/biao',
        element: <Biao></Biao>,
        icon: <UserOutlined />,
        label: '图表'
    },
    {
        path: '/fanyi',
        element: <Fanyi></Fanyi>,
        icon: <VideoCameraOutlined />,
        label: '翻译'
    },
]

const routes: homeRouter = [
    {
        path: '/',
        element: <App></App>,
        children: homeRoutes
    },
    {
        path: '/login',
        element: <Login></Login>
    },
]
const router = createBrowserRouter(routes)
export default router